<template>
  <div id="department_detail">
    <Row type='flex'
         justify="center"
         style="padding-top:100px">
      <Col>
      <div class="header-title">角色详情</div>
      <div class="content-detail">
        <Form :label-width="90">
          <FormItem label="角色名称："
                    prop="roleName">
            <p>{{formValidate.roleName}}</p>
          </FormItem>
          <FormItem label="角色详情："
                    prop="remark">
            <p style="width:475px">{{formValidate.remark}}</p>
          </FormItem>
        </Form>
      </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { demandRole } from '@/api/system/role'
export default {
  name: 'role_detail',
  data () {
    return {
      formValidate: {
        roleName: '',
        remark: ''
      }
    }
  },
  mounted () {
    demandRole({ 'merchantId': this.$store.state.user.merchantId, id: this.$route.params.id }).then(res => {
      if (res.data.status === 200) {
        this.formValidate = res.data.data
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>
<style lang="less" scoped>
#department_detail {
  .header-title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
    margin: 17px 36px;
  }
  .content-detail {
    font-size: 12px;
    margin-left: 64px;
    .ivu-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
